<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link href="../../../css/mui.plus.css" rel="stylesheet" />
    <link href="../../../css/mui.picker.min.css" rel="stylesheet" />
    <link href="../../../css/mui.poppicker.css" rel="stylesheet" />
    <style>
    	.mui-table-view-cell>a {
    		white-space: normal!important;
    	}
    	.label.label-info {
    		border-radius: 50px;
    		color: #fff;
    		background-color: #30B497;
    	}
    	.label.label-info.unchoose {
    		color: #666;
    		background-color: #eee;
    	} 
    	.form-tags>input {
    		margin-top: 10px;
    	}
    	i {
    		color: #FF924E;
    	}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav oe-pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">入院信息</h1>
	</header>
	<footer class="mui-bar mui-bar-footer" style="padding: 0;height: 50px;">
        <button type="button" id="btn-commit" class="mui-btn mui-btn-primary mui-btn-block" style="padding:10px 0;">保&nbsp;&nbsp;存</button>
    </footer>
	
    <div class="mui-content oe-helper">
	    <form id="list-input" class="mui-input-group">
	    	<ul class="mui-table-view">
		        <li class="mui-table-view-cell">
		            <a>
		               	<span>医院</span>
		               	<span class="mui-pull-right" name="111">
		               		加载中...
		               	</span>
		            </a>
		        </li>
		    </ul>
            <div class="mui-input-row">
                <label>姓名<i>*</i></label>
                <input type="text" name="case_admission_name" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>年龄<i>*</i></label>
                <input type="number" name="case_admission_age" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">性别<i>*</i></label>
                <input type="hidden" value="" name="case_admission_sex" id="hidSex" />
                <button id="btn-sex" type="button" class="mui-btn oe-btn-pick">请选择</button>
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">骨折类型<i>*</i></label>
                <input type="hidden" name="case_admission_broke_type" id="hidType" value="" />
                <button id="btn-type" type="button" class="mui-btn oe-btn-pick">请选择</button>
            </div>
            <ul class="mui-table-view">
		        <li class="mui-table-view-cell mui-collapse">
		        	<input type="hidden" name="case_admission_broke_sub_type" id="hidTypeSub" value="" />
					<a class="mui-navigate-right" href="#">骨折分型</a>
					<div class="mui-collapse-content">
						<div id="tag-typesub" class="form-tags">
							<p>解剖分型</p>
							<span class="label label-info unchoose">头下型</span>
							<span class="label label-info unchoose">头颈型</span>
							<span class="label label-info unchoose">经颈型</span>
							<span class="label label-info unchoose">基底型</span>
							<p>Garden分型</p>
							<span class="label label-info unchoose">GardenI型</span>
							<span class="label label-info unchoose">GardenⅡ型</span>
							<span class="label label-info unchoose">GardenⅢ型</span>
							<span class="label label-info unchoose">GardenⅣ型</span>
							<p>AO分型</p>
							<span class="label label-info unchoose">A1.1</span>
							<span class="label label-info unchoose">A1.2</span>
							<span class="label label-info unchoose">A1.3</span><br />
							<span class="label label-info unchoose">A2.1</span>
							<span class="label label-info unchoose">A2.2</span>
							<span class="label label-info unchoose">A2.3</span><br />
							<span class="label label-info unchoose">A3.1</span>
							<span class="label label-info unchoose">A3.2</span>
							<span class="label label-info unchoose">A3.3</span>
						</div>
					</div>
				</li>
			</ul>
            <div class="mui-input-row">
                <label class="oe-label-pick">骨折部位</label>
                <input type="hidden" name="case_admission_broke_part" id="hidPart" value="" />
                <button id="btn-part" type="button" class="mui-btn oe-btn-pick">请选择</button>
            </div>
            <div class="mui-input-row">
                <label>ID</label>
                <input type="text" name="case_admission_id" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>联系方式</label>
                <input type="number" name="case_admission_contact_info" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">受伤时间</label>
                <input type="hidden" name="case_admission_injury_date" id="hidTimeInjury" value="" />
                <button id="btn-time-injury" type="button" class="mui-btn oe-btn-pick" data-options='{"type":"date","beginYear":2010,"endYear":2020}'>请选择</button>
            </div>
            <ul class="mui-table-view">
	        <li class="mui-table-view-cell mui-collapse">
	        	<input type="hidden" name="case_admission_injury_reason" id="hidReason" value="" />
				<a class="mui-navigate-right" href="#">受伤原因</a>
				<div class="mui-collapse-content">
					<div id="tag-reason" class="form-tags">
						<span class="label label-info unchoose">跌倒</span>
						<span class="label label-info unchoose">车祸</span>
						<span class="label label-info unchoose">坠落伤</span>
						<span class="label label-info unchoose">骑车摔倒</span>
						<span class="label label-info unchoose">运动伤</span>
					</div>
				</div>
			</li>
			</ul>
            <div class="mui-input-row">
                <label class="oe-label-pick">入院时间</label>
                <input type="hidden" name="case_admission_date" id="hidTimeEnter" value="" />
                <button id="btn-time-enter" type="button" class="mui-btn oe-btn-pick" data-options='{"type":"date","beginYear":2010,"endYear":2020}'>请选择</button>
            </div>
            <div class="mui-input-row">
                <label>特殊说明</label>
                <input type="text" name="case_admission_special_note" placeholder="请填写" style="text-align: right;">
            </div>
       </form>
    </div>
    
    <script id="tmp-list-input" type="text/html">
    	{{if data}}
    		<ul class="mui-table-view">
		        <li class="mui-table-view-cell">
		            <a>
		               	<span>医院</span>
		               	<span class="mui-pull-right" name="111">
		               		{{data.case_admission_hospital}}
		               	</span>
		            </a>
		        </li>
		    </ul>
            <div class="mui-input-row">
                <label>姓名<i>*</i></label>
                <input type="text" name="case_admission_name" placeholder="请填写" style="text-align: right;" value="{{data.case_admission_name}}">
            </div>
            <div class="mui-input-row">
                <label>年龄<i>*</i></label>
                <input type="number" name="case_admission_age" placeholder="请填写" style="text-align: right;" value="{{data.case_admission_age}}">
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">性别<i>*</i></label>
                <input type="hidden" name="case_admission_sex" id="hidSex" value="{{data.case_admission_sex}}" />
                <button id="btn-sex" type="button" class="mui-btn oe-btn-pick">{{data.case_admission_sex ? data.case_admission_sex : '请选择'}}</button>
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">骨折类型<i>*</i></label>
                <input type="hidden" name="case_admission_broke_type" id="hidType" value="{{data.case_admission_broke_type}}" />
                <button id="btn-type" type="button" class="mui-btn oe-btn-pick">{{data.case_admission_broke_type ? data.case_admission_broke_type : '请选择'}}</button>
            </div>
            <ul class="mui-table-view">
		        <li class="mui-table-view-cell mui-collapse">
		        	<input type="hidden" name="case_admission_broke_sub_type" id="hidTypeSub" value="{{data.case_admission_broke_sub_type}}" />
					<a class="mui-navigate-right" href="#">骨折分型</a>
					<div class="mui-collapse-content">
						<div id="tag-typesub" class="form-tags">
							<p>解剖分型</p>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : '头下型'}}">头下型</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : '头颈型'}}">头颈型</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : '经颈型'}}">经颈型</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : '基底型'}}">基底型</span>
							<p>Garden分型</p>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'GardenI型'}}">GardenI型</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'GardenⅡ型'}}">GardenⅡ型</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'GardenⅢ型'}}">GardenⅢ型</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'GardenⅣ型'}}">GardenⅣ型</span>
							<p>AO分型</p>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'A1.1'}}">A1.1</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'A1.2'}}">A1.2</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'A1.3'}}">A1.3</span><br />
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'A2.1'}}">A2.1</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'A2.2'}}">A2.2</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'A2.3'}}">A2.3</span><br />
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'A3.1'}}">A3.1</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'A3.2'}}">A3.2</span>
							<span class="label label-info {{data.case_admission_broke_sub_type | match : 'A3.3'}}">A3.3</span>
						</div>
					</div>
				</li>
			</ul>
            <div class="mui-input-row">
                <label class="oe-label-pick">骨折部位</label>
                <input type="hidden" name="case_admission_broke_part" id="hidPart" value="{{data.case_admission_broke_part}}" />
                <button id="btn-part" type="button" class="mui-btn oe-btn-pick">{{data.case_admission_broke_part ? data.case_admission_broke_part : '请选择'}}</button>
            </div>
            <div class="mui-input-row">
                <label>ID</label>
                <input type="text" name="case_admission_id" placeholder="请填写" style="text-align: right;"  value="{{data.case_admission_id}}">
            </div>
            <div class="mui-input-row">
                <label>联系方式</label>
                <input type="number" name="case_admission_contact_info" placeholder="请填写" style="text-align: right;" value="{{data.case_admission_contact_info}}">
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">受伤时间</label>
                <input type="hidden" name="case_admission_injury_date" id="hidTimeInjury" value="{{data.case_admission_injury_date}}" />
                <button id="btn-time-injury" type="button" class="mui-btn oe-btn-pick" data-options='{"type":"date","beginYear":2010,"endYear":2020}'>{{data.case_admission_injury_date ? data.case_admission_injury_date : '请选择'}}</button>
            </div>
            <ul class="mui-table-view">
	        <li class="mui-table-view-cell mui-collapse">
	        	<input type="hidden" name="case_admission_injury_reason" id="hidReason" value="{{data.case_admission_injury_reason}}" />
				<a class="mui-navigate-right" href="#">受伤原因</a>
				<div class="mui-collapse-content">
					<div id="tag-reason" class="form-tags">
						<span class="label label-info {{data.case_admission_injury_reason | match : '跌倒'}}">跌倒</span>
						<span class="label label-info {{data.case_admission_injury_reason | match : '车祸'}}">车祸</span>
						<span class="label label-info {{data.case_admission_injury_reason | match : '坠落伤'}}">坠落伤</span>
						<span class="label label-info {{data.case_admission_injury_reason | match : '骑车摔倒'}}">骑车摔倒</span>
						<span class="label label-info {{data.case_admission_injury_reason | match : '运动伤'}}">运动伤</span>
						<span class="label label-info {{data.case_admission_injury_reason | match : '其他'}}">其他</span>
						<!--<input type="text" placeholder="自定义字段" name="case_admission_injury_reason_remark" value="{{data.case_admission_injury_reason_remark}}"/>-->
					</div>
				</div>
			</li>
			</ul>
            <div class="mui-input-row">
                <label class="oe-label-pick">入院时间</label>
                <input type="hidden" name="case_admission_date" id="hidTimeEnter" value="{{data.case_admission_date}}" />
                <button id="btn-time-enter" type="button" class="mui-btn oe-btn-pick" data-options='{"type":"date","beginYear":2010,"endYear":2020}'>{{data.case_admission_date ? data.case_admission_date : '请选择'}}</button>
            </div>
            <div class="mui-input-row">
                <label>特殊说明</label>
                <input type="text" name="case_admission_special_note" placeholder="请填写" style="text-align: right;" value="{{data.case_admission_special_note}}">
            </div>
    	{{/if}}
    </script>
    <script src="../../../js/mui.min.js"></script>
	<script src="../../../js/mui.picker.min.js"></script>
    <script src="../../../js/mui.poppicker.js"></script>
    <script src="../../../js/app.js"></script>
    <script src="../../../js/lib/template.js"></script>
    <script src="../../../js/jquery-1.9.1.min.js"></script>
    <script src="../../../js/jquery.tags.min.js"></script>
    <script>
    	(function($, a){
    		// 初始化tag插件
//  		var tmpReason;
    		
//  		jQuery('#btn-reason').tags();
//  		setInterval(function () {
//				tmpReason = jQuery('#btn-reason').val();
//			}, 500);
    		
    		//  定义各种非input输入的隐藏input框
    		
    		// 由于本页面的静态数据都是通过模板初始化的，所以不能直接在这里用变量去保存这些输入框
//  		var hidTimeInjury = document.getElementById("hidTimeInjury"),
//  			hidSex = document.getElementById("hidSex"),
//  			hidPart = document.getElementById("hidPart"),
//  			hidReason = document.getElementById("hidReason"),
//  			hidTimeEnter = document.getElementById("hidTimeEnter"),
//  			hidType = document.getElementById("hidType");
//  			hidTypeSub = document.getElementById("hidTypeSub");

			// 定义模板可用的外部方法
			template.helper('match', function(data, compareData){
				var reg = new RegExp(compareData);
				return data?(reg.test(data)?'':'unchoose'):'unchoose';
			});
			
    		var wv,
    			caseId,
    			html,
    			tmpData,
    			commitData;
    			
    		$('body').on('tap', '#btn-commit', function(){
//  			hidReason.value += tmpReason;
    			commitData = app.form.getJsonFromForm('list-input');
    			commitData.case_id = caseId;
    			
    			if( !commitData.case_admission_name || !commitData.case_admission_age || !commitData.case_admission_sex || !commitData.case_admission_broke_type) return $.toast('您还有必填项未填哦');
    			
    			CommitDataById(commitData);
    		})
    		
    		// 受伤部位
    		$('.mui-content').on('tap', '#btn-part', function () {
    			var self = this;
    			partPicker.show(function (items) {
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                    if (items && items.length > 0) {
                        self.textContent = document.getElementById("hidPart").value = items[0].text;
                        if(self.textContent !== '请选择'){
                        	self.style.color = '#000';
                        }
                    }
                });
    		});
    		
    		// 性别
    		$('.mui-content').on('tap', '#btn-sex', function () {
    			var self = this;
    			sexPicker.show(function (items) {
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                    if (items && items.length > 0) {
                        self.textContent = document.getElementById("hidSex").value = items[0].text;
                        if(self.textContent !== '请选择'){
                        	self.style.color = '#000';
                        }
                    }
                });
    		});
    		
    		// 骨折类型
    		$('.mui-content').on('tap', '#btn-type', function () {
    			var self = this;
    			typePicker.show(function (items) {
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                    if (items && items.length > 0) {
                        self.textContent = document.getElementById("hidType").value = items[0].text;
                        if(self.textContent !== '请选择'){
                        	self.style.color = '#000';
                        }
                    }
                });
    		});
    		
    		// 受伤时间
    		$('.mui-content').on('tap', '#btn-time-injury', function () {
				var self = this;
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var picker = new $.DtPicker(options);
                picker.show(function (rs) {
                    self.textContent = document.getElementById("hidTimeInjury").value = rs.text;
                    if(self.textContent !== '请选择'){
                    	self.style.color = '#000';
                    }
                    picker.dispose();
                });
            });
            
           	setTimeout(function(){
           		 // 受伤原因
    		$('#tag-reason').on('tap', 'span', function(){
    			var self = this;
    			if(/unchoose/.test(self.classList)){
    				self.classList.remove('unchoose');
    				document.getElementById("hidReason").value += self.textContent + ',';
    			}else {
    				self.classList.add('unchoose');
    				document.getElementById("hidReason").value = document.getElementById("hidReason").value.replace(self.textContent + ',' , '');
    			}
    		});
    		
    		// 骨折分型
    		$('#tag-typesub').on('tap', 'span', function () {
    			var self = this;
    			if(/unchoose/.test(self.classList)){
    				self.classList.remove('unchoose');
    				document.getElementById("hidTypeSub").value += self.textContent + ',';
    			}else {
    				self.classList.add('unchoose');
    				document.getElementById("hidTypeSub").value = document.getElementById("hidTypeSub").value.replace(self.textContent + ',' , '');
    			}
    		});
           	}, 1000);
            
            // 入院时间
    		$('.mui-content').on('tap', '#btn-time-enter', function () {
    			var hidTimeEnter = document.getElementById("hidTimeEnter");
				var self = this;
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var picker = new $.DtPicker(options);
                picker.show(function (rs) {
                    self.textContent = hidTimeEnter.value = rs.text;
                    if(self.textContent !== '请选择'){
                    	self.style.color = '#000';
                    }
                    picker.dispose();
                });
            });
    		
    		$.plusReady(function(){
    			wv = plus.webview.currentWebview();
    			caseId = wv.caseId;
    			type = wv.type;
				getCaseInfoById(caseId, type);
				
    		});
    		var getCaseInfoById = function(caseId, type){
    			app.net.get('c_old_man_hip_broke_prj_case/show_by_type', {case_id: caseId, case_type: type}, function(data){
    				if(data && data.code === '100') {
    					tmpData = data;
    					html = template('tmp-list-input', tmpData);
    					document.getElementById("list-input").innerHTML = html
    				}
    			});
    		}
    		
    		var CommitDataById = function(commitData){
    			app.net.ajax('c_old_man_hip_broke_prj_case/update', commitData, 'post', function(data){
    				if(data && data.code === '100'){
    					$.toast('保存成功');
    					var casePage = plus.webview.getWebviewById('case.html')
    					$.fire(casePage, 'hasAdmissionInfo');
    					$.back(); //渲染模板
    			} else {
    				$.toast('您尚未进行任何修改哦');
    			}
    		},function(msg){
    			console.log(msg)
    		})}
    		
    		// 选择框数据初始化
    		var sexPicker = new $.PopPicker(),
    			partPicker = new $.PopPicker(),
    			typePicker = new $.PopPicker();
                
            sexPicker.setData([{
                value: '1',
                text: '男'
            }, {
                value: '0',
                text: '女'
            }]);
            
          	partPicker.setData([{
          	  	value: '1',
                text: '左'
            }, {
                value: '0',
                text: '右'
            }]);
            
            typePicker.setData([{
          	  	value: '0',
                text: '股骨颈骨折',
            }, {
                value: '1',
                text: '股骨粗隆间骨折',
            },{
            	value: '1',
                text: '股骨粗隆下骨折'
            }]);
            
    	}(mui, app));
    </script>
</body>
</html>